.
<template>
  <div v-loading="loading" class="base">
    <!-- 采购产品信息 -->
    <VabCard v-if="baseData">
      <template #header>
        <span class="leve2_title">采购产品信息</span>
      </template>
      <template #default>
        <div class="box_count">
          采购数量合计：
          <span>{{ baseData.sales_num || 0 }}</span>
        </div>
        <el-table
          border
          max-height="280"
          style="width: 100%"
          :data="product"
          v-loading="loading"
          row-key="serial_number"
          default-expand-all
        >
          <el-table-column label="序号" align="center" width="90">
            <template #default="{ row }">
              {{ row.serial_number }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, i) in OrderTrackDateilProductCloums"
            :key="i"
            min-width="100"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :align="
              item.type == 'money' || item.type == 'number' ? 'right' : 'center'
            "
          >
            <template #header>
              <span class="text_center">{{ item.label }}</span>
            </template>
            <template #default="scope">
              <!-- 自定义 -->
              <div v-if="item.type == 'custom'">
                <span v-if="item.prop == 'status'">
                  <el-tag :type="statusColor(scope.row.status)">
                    {{ OrderStatus(scope.row.status, scope.row) || '--' }}
                  </el-tag>
                </span>
              </div>
              <!-- 正常 -->
              <div v-else class="ellipsis">
                {{ _FieldFormat(scope.row[item.prop], item.type) || '--' }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </VabCard>
    <!-- 采购基础信息 -->
    <VabCard>
      <template #header>
        <span class="leve2_title">采购基础信息</span>
      </template>
      <template #default>
        <div>
          <el-row :gutter="24" v-loading="loading">
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
              <el-row :gutter="24">
                <el-col
                  v-for="(item, i) in OrderTrackDateilBase"
                  :key="i"
                  :xs="24"
                  :sm="24"
                  :md="12"
                  :lg="12"
                  :xl="12"
                >
                  <div class="detail-mode" v-if="baseData">
                    <span class="label">{{ item.label }}</span>
                    <span
                      class="text height"
                      :title="_BaseFormat(baseData[item.prop], item.prop)"
                    >
                      {{ _BaseFormat(baseData[item.prop], item.prop) || '--' }}
                    </span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
              <el-row :gutter="24">
                <!-- style="border: 1px solid red" -->
                <el-col
                  v-for="(item, i) in createBase"
                  :key="i"
                  :xs="24"
                  :sm="24"
                  :md="24"
                  :lg="24"
                  :xl="24"
                >
                  <div class="detail-mode" v-if="baseData">
                    <span class="label">{{ item.label }}</span>
                    <span
                      class="text height"
                      :title="_BaseFormat(baseData[item.prop], item.prop)"
                    >
                      {{ _BaseFormat(baseData[item.prop], item.prop) }}
                    </span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </VabCard>
  </div>
</template>

<script setup lang="ts">
  /**
   * 采购产品信息
   */
  import { FieldFormat, StrSplit } from '~/src/utils/utils'
  import {
    OrderTrackDateilProductCloums,
    OrderStatus,
    OrderTrackDateilBase,
  } from '../../components/tools'
  /**
   * @var
   */

  const createBase = [
    { label: '创建人', prop: 'create_user_name', type: '' },
    { label: '创建时间', prop: 'create_at', type: '' },
    { label: '对接商务', prop: 'undertaker_name', type: '' },
  ]

  let baseData = ref<any>(null)
  const product = ref<any>([])
  const loading = ref<boolean>(false)

  // 字段级格式化
  const _BaseFormat = (value: string, prop = '') => {
    if (!value) return '--'
    if (prop == 'pay_type') {
      if (value == '1') return '运费到付'
      if (value == '2') return '运费预付'
    }
    // if (prop == 'shipping_address') {
    //   return (
    //     baseData.value.shipping_province +
    //     baseData.value.shipping_city +
    //     baseData.value.shipping_district
    //   )
    // }
    return value
  }
  // 字段级格式化
  const _FieldFormat = (value: string, type = '') => {
    return FieldFormat(value, type, 2)
  }

  // 生效状态tag_color
  const statusColor = (value: number) => {
    if (value == 0) return 'warning'
    if (value == 1) return 'success'
    return 'info'
  }
  // 获取更新数据
  const getUpdateData = async (res: any) => {
    loading.value = true
    baseData.value = res
    const detail = res.detail

    const list = detail.map((item: any) => {
      return {
        ...item,
        father_key:
          item.goods_type == '赠品' ? StrSplit(item.serial_number, '.', 0) : '',
        son_key:
          item.goods_type == '赠品' ? StrSplit(item.serial_number, '.', 1) : '',
        children: [],
      }
    })

    const fatherArray = list.filter((item: any) => {
      if (item.goods_type != '赠品') return item
    })
    const sonArray = list.filter((item: any) => {
      if (item.goods_type == '赠品') return item
    })

    await fatherArray.forEach((item: any, i: number) => {
      sonArray.forEach((jtem: any) => {
        if (item.serial_number == jtem.father_key) {
          item.children.push(jtem)
        }
      })
    })

    product.value = fatherArray
    loading.value = false
  }

  /**
   * @实例
   */
  defineExpose({
    getUpdateData,
  })
</script>

<style lang="scss" scoped>
  // .base {
  //   border: 1px solid #00ffff;
  //   border-radius: 2px;
  //   :deep() {
  //     .el-card {
  //       margin-bottom: 0px !important;
  //     }
  //   }
  // }
</style>
